<template>
  <div class="inst">
    <el-row >
      <el-col :span="23" style="padding : 50px 0 10px 10px">
        <div class="date">
          <div class="icon"></div>
          <div class="date-main" @click="dateChoose">{{date}}</div>
        </div>
        <div class="code">
          <input type="text" v-model="code1" placeholder="起始物料代码">至
          <input type="text" v-model="code2" placeholder="截止物料代码">
        </div>
        <div class="buttons">
          <input type="button" value="查询" @click="cc">
          <router-link to="/SaleDayChart" tag="a">
            <input type="button" class="chart"  value="可销售天数图表" :class="{btn:btnFlag}" :disabled="!btnFlag">
          </router-link>
        </div>
      </el-col>
    </el-row>
      <el-row>
        <el-col>
          <el-table stripe :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange" height="340">
            <el-table-column type="selection" width="30"></el-table-column>
            <el-table-column fixed prop="code" label="产品代码" width="90">
            </el-table-column>
            <el-table-column prop="name" show-overflow-tooltip label="产品名称" width="150" align="center">
            </el-table-column>
            <el-table-column prop="norms" label="规格型号" show-overflow-tooltip align="center">
            </el-table-column>
            <el-table-column prop="unit" label="单位" align="center">
            </el-table-column>
            <el-table-column prop="extant" label="现存量" align="center">
            </el-table-column>
            <el-table-column prop="oneWeek" label="近一周出库量" align="center">
            </el-table-column>
            <el-table-column prop="fourWeek" label="近四周出库量" align="center">
            </el-table-column>
            <el-table-column prop="threeOut1" label="近三个月出库量" align="center">
            </el-table-column>
            <el-table-column prop="threeOut2" label="近三个月日均出库量" align="center">
            </el-table-column>
            <el-table-column prop="day" label="可销售天数" align="center" >
            </el-table-column>
            <el-table-column prop="lastOne" label="去年同期一周出库量" align="center">
            </el-table-column>
            <el-table-column prop="lastFour" label="去年同期四周出库量" align="center">
            </el-table-column>
            <el-table-column prop="lastThree1" label="去年同期三个月出库量" align="center">
            </el-table-column>
            <el-table-column prop="lastThree2" label="去年同期三个月日均出库量" align="center">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px">
          <!-- 当前页 -->
          <span style="color:#9C9EA3;line-height:28px">当前页：{{currentPage+1}}</span>
          <el-col :span="20">
            <el-button-group style="float:right">
              <!-- 上页 -->
              <el-button @click="handleCurrentChange(-1)"  :disabled="currentPage==0" size="mini" icon="arrow-left">上页</el-button>
              <!-- 下页 -->
              <el-button @click="handleCurrentChange(1)"  :disabled="!nextPage" size="mini">下页
              </el-button>
            </el-button-group>
          </el-col>
      </el-row>
  </div>
</template> 
<script>
import * as moment from 'moment';
export default {
  name: "component_name",
  data () {
    return {
        tableData:[],
        date:'',
        code1:'',
        code2:'',
        limit:10,
        currentPage: 0,
        multipleSelection: [],
        nextPage:false,
        btnFlag : false,
    };
  },
 methods: {
    handleSelectionChange(val) {
        this.multipleSelection = val;
        let resList = {codeList:[],daysList : [],codeName:[]};
         for (let i = 0; i < this.multipleSelection.length; i++) {
           let element = this.multipleSelection[i];
           resList.codeList.push(element.code);
           resList.daysList.push(element.day);
           resList.codeName.push(element.name);
         }
        sessionStorage.setItem("resList",JSON.stringify(resList))
        if(this.multipleSelection.length >0){
          this.btnFlag = true;
        }else{
          this.btnFlag = false;
        }
    },
    handleCurrentChange(val) {
       this.currentPage = val ? this.currentPage + val : 0; 
       this.initList() ;
    },
    cc  () {
     if(!this.date){
       this.$ddapi.toast('请选择查询日期');
       return;
     }else{
       sessionStorage.setItem('SaleOutdate',this.date)
     }
     if(!this.code1){
       this.$ddapi.toast('请选择起始物料代码');
       return;
     }else{
       sessionStorage.setItem('SaleOutcode1',this.code1)
     }
     if(!this.code2){
       this.$ddapi.toast('请选择截止物料代码');
       return;
     }else{
       sessionStorage.setItem('SaleOutcode2',this.code2)
     }
     this.currentPage=0;
     this.initList('cc') ;
   },
   initList:function(cc){
     this.$ddapi.showPreloader('使劲加载中...');
     sessionStorage.setItem('SaleOutcurrentPage',this.currentPage)
     this.$http.post('api/product/sellingOutLimit',{
       start:this.currentPage,limit:this.limit,
       searchDate:this.date,
       code2:this.code2,code1:this.code1
       }).then(res=>{
       this.$ddapi.hidePreloader();
       let result = res.data;
       if(result.code==100){
        this.tableData = result.data;
        if(cc == 'cc'){
           this.$ddapi.toast('查询成功');
          }
        if(this.tableData.length>this.limit){
          this.nextPage=true
          this.tableData=this.tableData.splice(0,this.limit)
        }else{
          this.tableData=this.tableData.splice(this.limit-1,this.limit)
          this.nextPage=false
        }
       }
       if(result.code == 101){
          this.tableData = [] ;
          this.$ddapi.toast('暂无数据');
       }
     })
   },
   dateChoose(){
     this.$ddapi.datepicker().then(res=>{
       this.date=res;
     })
   }
 },
 created: function () {

   this.$ddapi.toast('查询成功');
   this.date = moment().format('YYYY-MM-DD');
          
   
   if(sessionStorage.getItem('SaleOutcode1')&&sessionStorage.getItem('SaleOutcode2')&&sessionStorage.getItem('SaleOutdate')){
     this.date=sessionStorage.getItem('SaleOutdate')
     this.code1=sessionStorage.getItem('SaleOutcode1')
     this.code2=sessionStorage.getItem('SaleOutcode2')
     this.currentPage=sessionStorage.getItem('SaleOutcurrentPage')?parseInt(sessionStorage.getItem('SaleOutcurrentPage')):0;
     this.initList()}
  }
}
</script>
<style lang="css" scoped>
.btn{
  color : #1759A8 !important;
  border: 1px solid #1759A8 !important;
}
.date{
  width: 50%;
  height: 40px;
  border: 1px solid #d8dce5;
  box-sizing: border-box;
  background: #fff;
  position: relative;
  font-size: 1.2rem;   
}
.date>.icon{
  width: 1.4rem;
  height: 1.5rem;
  position: absolute;
  background:url('../../static/images/icon-date.png')no-repeat center/contain;
  left: 12rem;
  top:0;
  bottom: 0;
  margin:auto;
}
.date-main{
  width: 100%;
  height: 100%;
  padding-left: 8%;
  line-height: 40px;
}
.code{
  width: 100%;
  height: 40px;
  color: #9d9d9d;
  border: 1px solid #d8dce5;
  box-sizing: border-box;
  background: #fff;
  margin-top: 3px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 40px;
  font-size: 1.2rem;  
}
.code>input{
  width: 42%;
  padding-left: 10%;
}
.buttons{
  width: 100%;
  height: 30px;
  margin-top: 3px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 30px;
  font-size: 1.2rem;  
}
.buttons>input{
  width: 45%;
  border: 1px solid #1759A8;
  color: #1759A8;
  box-sizing: border-box;
  border-radius: 3px;

}
.buttons>a{
  display: block;
  width: 45%;
  height: 100%;
}
.buttons>a>input{
  width: 100%;
  height: 100%;
  border: 1px solid #D3C4B2;
  color: #D3C4B2;
  box-sizing: border-box;
  border-radius: 3px;

}
</style>